<!--
 * @Author: wwssaabb
 * @Date: 2021-09-09 11:41:16
 * @LastEditTime: 2021-09-17 15:12:38
 * @FilePath: \gshop-client\src\views\Login.vue
-->
<template>
  <div class="navabar">
    <NavBar bgc="#fff" colorLeft="#333" :leftArrow="true"></NavBar>
  </div>
  <div class="normal-page">
    <div class="logo"><span>哇哇外卖</span></div>
    <div class="content-wrap">
      <Tabs
        v-model:active="active"
        color="#02a774"
        class="content"
        line-width="50"
      >
        <Tab title="短信登录" class="message-login">
          <Form @submit="onSubmit('password')">
            <CellGroup inset>
              <Field
                class="input-item"
                v-model="submit.phone"
                name="phone"
                placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
              />
              <Field
                class="input-item"
                v-model="submit.validate"
                name="validate"
                placeholder="验证码"
                :rules="[{ required: true, message: '请填写验证码' }]"
              />
            </CellGroup>
            <div class="foot">
              <Button
                round
                block
                type="primary"
                color="#02a774"
                native-type="submit"
                @click="onSubmit('message')"
              >
                登录
              </Button>
              <div class="about">关于我们</div>
            </div>
          </Form>
        </Tab>
        <Tab title="密码登录" class="password-login">
          <Form @submit="onSubmit('password')">
            <CellGroup inset>
              <Field
                class="input-item"
                v-model="submit.username"
                name="username"
                placeholder="手机号/邮箱/用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <Field
                class="input-item"
                v-model="submit.password"
                type="password"
                name="password"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <div style="position: relative">
                <Field
                  class="input-item"
                  v-model="submit.validate"
                  name="validate"
                  placeholder="验证码"
                  maxlength="4"
                  :rules="[{ required: true, message: '请填写验证码' }]"
                /><img src="http://localhost:4000/captcha" alt="" />
              </div>
            </CellGroup>
            <div class="foot">
              <Button
                round
                block
                type="primary"
                color="#02a774"
                native-type="submit"
                @click="onSubmit('password')"
              >
                登录
              </Button>
              <div class="about">关于我们</div>
            </div>
          </Form>
        </Tab>
      </Tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import NavBar from "../components/Navbar.vue";
import { ref } from "vue";
import { Tab, Tabs, Button, Form, Field, CellGroup, Toast } from "vant";
const active = ref(1);

const submit = ref({
  username: "",
  password: "",
  phone: "",
  validate: "",
});
//提交表单
const onSubmit = (type: string): void => {
  console.log(type);
  console.log(submit.value);
  if (type === "message") {
    const { phone, validate } = submit.value;
    if (phone === "" || validate === "") Toast.fail("必填项未填写");
  } else {
    const { username, password, validate } = submit.value;
    if (username === "" || password === "" || validate === "")
      Toast.fail("必填项未填写");
  }
};
</script>

<style lang="scss" scoped>
.logo {
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    display: block;
    font-size: 40px;
    font-family: "Microsoft YaHei";
    letter-spacing: 5px;
    color: #02a774;
  }
}
.content-wrap {
  height: auto;
  .content {
    width: 80%;
    height: 100%;
    margin: 0 auto;

    .password-login,
    .message-login {
      height: 100%;
      border: 1px solid #eee;
      border-radius: 0 0 15px 15px;
      padding: 10px 0;
      .input-item {
        margin-bottom: 10px;
        position: relative;
      }
      img {
        position: absolute;
        top: 50%;
        right: 0;
        height: 40px;
        transform: translate(0, -50%);
      }
    }
  }
}
.foot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  button {
    width: 80%;
    height: 40px;
    border-radius: 5px;
    margin-bottom: 20px;
  }
  .about {
    color: #999;
  }
}
</style>
